<template>
  <div>
    <h2>v-bind</h2>
    <img v-cloak v-bind:src="imgUrl" alt="" style="width: 300px" />
    <a v-bind:href="link">图片来源</a>
    <hr />
    <p>原生html语法</p>
    <img
      src="https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg"
      alt=""
      style="width: 300px" />
    <hr />
    <hr />
    <hr />
    <div :class="className">{{ className }}</div>
    <div :class="isActive ? 'red' : 'yellow'">{{ message }}</div>
    <div :class="{ active: isActive, title: true }">{{ message }}</div>
    <div class="abc" :class="{ active: isActive, title: isActive }">{{ message }}</div>
    <div :class="classObj">{{ message }}</div>
    <button @click="toggle()">切换isActive</button>
    <hr />
    <hr />
    <hr />
    <div :style="{ color: finalColor, fontSize: '40px' }">v-bind绑定style-对象语法</div>
    <div :style="{ color: finalColor, fontSize: finalFontSize + 'px' }">v-bind绑定style-对象语法</div>
    <div :style="finalStyleObj">绑定data中的一个对象属性</div>
    <div :style="getFinalStyleObj()">绑定methods中的一个对象属性</div>
    <div
      :style="[
        {
          color: 'blue',
          fontSize: '40px'
        }
      ]">
      绑定数组语法
    </div>
    <div :style="[font1, color1]">绑定数组语法</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: 'https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg',
      link: 'https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg',
      className: 'className',
      message: 'hello world!',
      isActive: true,
      classObj: {
        active: true,
        title: true
      },
      finalColor: 'red',
      finalFontSize: '30',
      finalStyleObj: {
        'font-size': '20px',
        'font-weight': 800,
        backgroundColor: 'pink'
      },
      font1: {
        'font-size': '20px',
        fontWeight: 800
      },
      color1: {
        color: 'blue',
        backgroundColor: 'pink'
      }
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    },
    getFinalStyleObj() {
      return {
        'font-size': '40px',
        fontWeight: 800,
        backgroundColor: 'red'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.red {
  color: red;
}
.yellow {
  color: yellow;
}
.active {
  color: green;
}
.className {
  color: blueviolet;
}
.title {
  font-size: 30px;
}
</style>
